<!DOCTYPE html>
<html>
	<head>
		<!-- Meta -->
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

		<!-- Document title -->
		<title>成绩与答案</title>

		<meta name="description" content="AppUI - Admin Dashboard Template & UI Framework" />
		<meta name="author" content="rustheme" />
		<meta name="robots" content="noindex, nofollow" />

		<!-- Favicons -->
		<link rel="apple-touch-icon" href="assets/img/favicons/apple-touch-icon.png" />
		<link rel="icon" href="assets/img/favicons/favicon.ico" />

		<!-- Google fonts -->
		<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,400italic,500,900%7CRoboto+Slab:300,400%7CRoboto+Mono:400" />

		<!-- Page JS Plugins CSS -->
		<link rel="stylesheet" href="assets/js/plugins/slick/slick.min.css" />
		<link rel="stylesheet" href="assets/js/plugins/slick/slick-theme.min.css" />

		<!-- AppUI CSS stylesheets -->
		<link rel="stylesheet" id="css-font-awesome" href="assets/css/font-awesome.css" />
		<link rel="stylesheet" id="css-ionicons" href="assets/css/ionicons.css" />
		<link rel="stylesheet" id="css-bootstrap" href="assets/css/bootstrap.css" />
		<link rel="stylesheet" id="css-app" href="assets/css/app.css" />
		<link rel="stylesheet" id="css-app-custom" href="assets/css/app-custom.css" />

		<!-- 引入自己的css样式 -->
		<link rel="stylesheet" href="assets/css/scoreAndPapers.css" />
		<!-- End Stylesheets -->
	</head>
	<body class="app-ui layout-has-drawer layout-has-fixed-header">
		<div class="app-layout-canvas">
			<div class="app-layout-container">

				<!-- Drawer -->
				<aside class="app-layout-drawer">

					<!-- Drawer scroll area -->
					<div class="app-layout-drawer-scroll">
						<!-- Drawer logo -->
						<div id="logo" class="drawer-header">
							<a href="index.html">
								<h4 style=" text-align:center">云阅卷</h4>
							</a>
						</div>

						<!-- Drawer navigation -->
						<nav class="drawer-main">
							<ul class="nav nav-drawer">


								<li class="nav-item nav-drawer-header">菜单导航</li>

								<li class="nav-item nav-item-has-subnav">
									<a href="javascript:void(0)"><i class="ion-ios-calculator-outline"></i>考试管理</a>
									<ul class="nav nav-subnav">

										<li>
											<a href="examList.html">考试列表</a>
										</li>

										<li>
											<a href="createExam.html">创建考试</a>
										</li>
									</ul>
								</li>

								<li class="nav-item nav-item-has-subnav">
									<a href="javascript:void(0)"><i class="ion-ios-compose-outline"></i> 在线阅卷</a>
									<ul class="nav nav-subnav">

										<li>
											<a href="examSetting.html">阅卷设置</a>
										</li>

										<li>
											<a href="examPapers.html">我要阅卷</a>
										</li>

										<li>
											<a href="examProblemPapers.html">问题卷处理</a>
										</li>
										<li>
											<a href="examProgress.html">进度监控</a>
										</li>

										<li>
											<a href="examQuality.html">质量抽查</a>
										</li>

									</ul>
								</li>


								<li class="nav-item nav-item-has-subnav">
									<a href="javascript:void(0)"><i class="ion-ios-list-outline"></i> 成绩管理</a>
									<ul class="nav nav-subnav">

										<li>
											<a href="examReport.html">考试成绩单</a>
										</li>

										<li>
											<a href="examSubReport.html">单科试题得分表</a>
										</li>

										<li>
											<a href="gradeAnalyze.html">年纪成绩分析</a>
										</li>

										<li>
											<a href="classAnalyze.html">班级成绩分析</a>
										</li>

									</ul>
								</li>

								<li class="nav-item nav-item-has-subnav">
									<a href="javascript:void(0)"><i class="ion-ios-browsers-outline"></i> 教师讲卷</a>
									<ul class="nav nav-subnav">

										<li>
											<a href="scoreAndPapers.html">成绩与答卷</a>
										</li>

										<li>
											<a href="highScoreComposition.html">高分作文</a>
										</li>

										<li>
											<a href="topicScore.html">试题得分情况</a>
										</li>

										<li>
											<a href="subAnalyzeReport.html">学科分析报表</a>
										</li>
									</ul>
								</li>

								<li class="nav-item nav-item-has-subnav">
									<a href="javascript:void(0)"><i class="ion-social-javascript-outline"></i> 用户中心</a>
									<ul class="nav nav-subnav">

										<li>
											<a href="schoolManager.html">学校管理</a>
										</li>

										<li>
											<a href="subManager.html">学科管理</a>
										</li>

										<li>
											<a href="gradeManager.html">年级管理</a>
										</li>

										<li>
											<a href="gradeAndSubManager.html">年级与学科关系维护</a>
										</li>

										<li>
											<a href="teaManager.html">教师管理</a>
										</li>

										<li>
											<a href="classManager.html">班级管理</a>
										</li>

										<li>
											<a href="stuManager.html">学生管理</a>
										</li>

										<li>
											<a href="subAdnClassAnager.html">学科与班级关系维护</a>
										</li>
									</ul>
								</li>

							</ul>
						</nav>
						<!-- End drawer navigation -->

						<div class="drawer-footer">
							<p class="copyright">Copyright &copy; 2020.北京万邦易嵌科技有限公司.<a target="_blank" href="http://www.wanbangee.com">万邦易嵌</a></p>
						</div>
					</div>
					<!-- End drawer scroll area -->
				</aside>
				<!-- End drawer -->

				<!-- Header -->
				<header class="app-layout-header">
					<nav class="navbar navbar-default">
						<div class="container-fluid">
							<div class="navbar-header">
								<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#header-navbar-collapse"
								 aria-expanded="false">
									<span class="sr-only">Toggle navigation</span>
									<span class="icon-bar"></span>
									<span class="icon-bar"></span>
									<span class="icon-bar"></span>
								</button>
								<button class="pull-left hidden-lg hidden-md navbar-toggle" type="button" data-toggle="layout" data-action="sidebar_toggle">
									<span class="sr-only">Toggle drawer</span>
									<span class="icon-bar"></span>
									<span class="icon-bar"></span>
									<span class="icon-bar"></span>
								</button>
								<span class="navbar-page-title">Dashboard</span>
							</div>

							<div class="collapse navbar-collapse" id="header-navbar-collapse">

								<ul class="nav navbar-nav navbar-right navbar-toolbar hidden-sm hidden-xs">

									<a href="javascript:void(0)" data-toggle="dropdown"><i class="ion-ios-bell"></i> <span class="badge">3</span></a>
									<ul class="dropdown-menu dropdown-menu-right">
										<li class="dropdown-header">Profile</li>
										<li>
											<a tabindex="-1" href="javascript:void(0)"><span class="badge pull-right">3</span> News </a>
										</li>
										<li>
											<a tabindex="-1" href="javascript:void(0)"><span class="badge pull-right">1</span> Messages </a>
										</li>
										<li class="divider"></li>
										<li class="dropdown-header">More</li>
										<li>
											<a tabindex="-1" href="javascript:void(0)">Edit Profile..</a>
										</li>
									</ul>
									</li>

									<li class="dropdown dropdown-profile">
										<a href="javascript:void(0)" data-toggle="dropdown">
											<span class="m-r-sm">John Doe <span class="caret"></span></span>
											<img class="img-avatar img-avatar-48" src="assets/img/avatars/avatar3.jpg" alt="User profile pic" />
										</a>
										<ul class="dropdown-menu dropdown-menu-right">
											<li class="dropdown-header">
												Pages
											</li>
											<li>
												<a href="base_pages_profile.html">Profile</a>
											</li>
											<li>
												<a href="base_pages_profile.html"><span class="badge badge-success pull-right">3</span> Blog</a>
											</li>
											<li>
												<a href="frontend_login_signup.html">Logout</a>
											</li>
										</ul>
									</li>
								</ul>
								<!-- .navbar-right -->
							</div>
						</div>
						<!-- .container-fluid -->
					</nav>
					<!-- .navbar-default -->
				</header>
				<!-- End header -->

				<main class="app-layout-content">
					<!-- Page Content -->
					<div class="container-fluid p-y-md">
						<div class="head_box">
							<div class="head_content">
								<ul>
									<li>
										<span>选择考试：</span>
										<select id="el-select-exam">
											<option value="volvo">Volvo</option>
											<option value="saab">Saab</option>
											<option value="opel">Opel</option>
											<option value="audi">Audi</option>
										</select>
									</li>
									<li>
										<span>选择班级：</span>
										<select id="el-select-class">
											<option value="volvo">Volvo</option>
											<option value="saab">Saab</option>
											<option value="opel">Opel</option>
											<option value="audi">Audi</option>
										</select>
									</li>
									<li>
										<span>选择科目：</span>
										<select id="el-select-sub">
											<option value="volvo">Volvo</option>
											<option value="saab">Saab</option>
											<option value="opel">Opel</option>
											<option value="audi">Audi</option>
										</select>
									</li>
								</ul>
							</div>
						</div>
					
						<div>
							<div class="grade_distribution">
								<div class="head">
									<h2>成绩分布</h2>
								</div>

								<div class="grade_distribution_con cf">
									<div class="fl" id="echart_box">
										<!-- 柱状图 -->
									</div>

									<div class="fr grade_score_list">
										<h4>设置分数段</h4>
										<ul id="subSocreSheetInfo">
											<li title="分数段从高分段到低分段填写">
												<span class="baohan">(包含)</span>
												<input type="number" max="300" min="0" placeholder="低" />
												<span class="line_divide"></span>
												<input type="number" max="300" min="0" placeholder="高" /> 分
												<span class="baohan">(不包含)</span>
												<button title="删除该分段">x</button>
											</li>
										</ul>
										<div class="grade_score_button">
											<button id="sub_score_add">添加分数段</button>
											<button id="sub_score_save">确定</button>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="grades_list">
							<div class="search cf">
								<div class="searchInput">
									<span><img src="assets/img/myImgs/search.png" /></span>
									<input type="search" autocomplete="off" placeholder="请输入姓名或学号搜索" class="el-input__inner" />
								</div>
							</div>
							<table class="table table-striped">
								<thead>
									<tr>
										<th>排名</th>
										<th>班级</th>
										<th>学号</th>
										<th>姓名</th>
										<th>分数</th>
										<th>客观题得分</th>
										<th>主观题得分</th>
										<th>考试答卷</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td>Tanmay</td>
										<td>Bangalore</td>
										<td>560001</td>
										<td>Tanmay</td>
										<td>Bangalore</td>
										<td>560001</td>
										<td>Tanmay</td>
										<td><button>查看答卷</button></td>
									</tr>
									<tr>
										<td>Tanmay</td>
										<td>Bangalore</td>
										<td>560001</td>
										<td>Tanmay</td>
										<td>Bangalore</td>
										<td>560001</td>
										<td>Tanmay</td>
										<td><button>查看答卷</button></td>
									</tr>
									<tr>
										<td>Tanmay</td>
										<td>Bangalore</td>
										<td>560001</td>
										<td>Tanmay</td>
										<td>Bangalore</td>
										<td>560001</td>
										<td>Tanmay</td>
										<td><button>查看答卷</button></td>
									</tr>
								</tbody>
							</table>
							<div class="el-pagination">
								<ul class="pagination">
									<li><a href="#">&laquo;</a></li>
									<li class="active"><a href="#">1</a></li>
									<li class="disabled"><a href="#">2</a></li>
									<li><a href="#">3</a></li>
									<li><a href="#">4</a></li>
									<li><a href="#">5</a></li>
									<li><a href="#">&raquo;</a></li>
								</ul>

							</div>
						</div>
					</div>

				</main>

			</div>
			<!-- .app-layout-container -->
		</div>
	</body>
	<!-- AppUI Core JS: jQuery, Bootstrap, slimScroll, scrollLock and App.js -->
	<script src="assets/js/core/jquery.min.js"></script>
	<script src="assets/js/core/bootstrap.min.js"></script>
	<script src="assets/js/core/jquery.slimscroll.min.js"></script>
	<script src="assets/js/core/jquery.scrollLock.min.js"></script>
	<script src="assets/js/core/jquery.placeholder.min.js"></script>
	<script src="assets/js/app.js"></script>
	<script src="assets/js/app-custom.js"></script>

	<!-- Page Plugins -->
	<script src="assets/js/plugins/slick/slick.min.js"></script>
	<script src="assets/js/plugins/chartjs/Chart.min.js"></script>
	<script src="assets/js/plugins/flot/jquery.flot.min.js"></script>
	<script src="assets/js/plugins/flot/jquery.flot.pie.min.js"></script>
	<script src="assets/js/plugins/flot/jquery.flot.stack.min.js"></script>
	<script src="assets/js/plugins/flot/jquery.flot.resize.min.js"></script>

	<!-- Page JS Code -->
	<script src="assets/js/pages/index.js"></script>

	<!-- 柱状图 echarts.min.js-->
	<script src="assets/js/echarts.min.js"></script>
	<script>
		$(function() {
			// Init page helpers (Slick Slider plugin)
			App.initHelpers('slick');
		});
	</script>
	<script>
		/* 引入柱状图 */
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById("echart_box"));

		// 指定图表的配置项和数据
		var option = {
			title: {
				/*  text: '第一个 ECharts 实例' */
			},
			tooltip: {},
			legend: {
				/*  data:['销量'] */
			},
			xAxis: {
				data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
			},
			yAxis: {},
			series: [{
				/* name: '销量', */
				type: 'bar',
				data: [5, 20, 36, 10, 10, 20]
			}]
		};

		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
		
		/* 路由网关路径 */
		var url = "http://localhost:6630/wanbangee/exam-statistic"
		
		/* 模拟当前登陆人信息：学校ID：1 */
		var schId = 1;
		var examId = 0;
		var subId = 0;
		
		
		findAllExam();
		/* 获取当前登录人所在学校的所有考试 */
		function findAllExam(){
			var examNameContext = ""
			$.ajax({
				type:"get",
				url:url+"/scoreReport/selectMexamBySchId",
				data:{
					schId:schId
				},
				success:function(data){
					if (data.code == 1001) {
						/* 数据返回成功 */
						var mExam = data.mExam; //学校的全部考试信息
						for (var i = 0; i < mExam.length; i++) {
							if(i == 0){
								examNameContext += "<option value='" + mExam[i].examId + "'selected>" + mExam[i].examNm + "</option>"
								examId = mExam[i].examId;
							}else{
								examNameContext += "<option value='" + mExam[i].examId + "'>" + mExam[i].examNm + "</option>"
							}
						}
					}else {
						examNameContext += "<option value='" + data.code + "'>" + data.msg + "</option>"
					} 
					$('#el-select-exam').html(examNameContext);
					findAllClass();
				}
			})
		}
		
		/* 查询这次考试的班级 */
		function findAllClass(){
			var classNameContext = ""
			$.ajax({
				type:"get",
				url:url + "/scoreReport/getClassByExamId",
				data:{
					examId:examId
				},
				success:function(data){
					if (data.code == 1001) {
						/* 数据返回成功 */
						var mClass = data.mClass; //学校的全部考试信息
						for (var i = 0; i < mClass.length; i++) {
							if(i == 0){
								classNameContext += "<option value='" + mClass[i].claId + "'selected>" + mClass[i].claNm + "</option>"
							}else{
								classNameContext += "<option value='" + mClass[i].claId + "'>" + mClass[i].claNm + "</option>"
							}
						}
					}else {
						classNameContext += "<option value='" + data.code + "'>" + data.msg + "</option>"
					} 
					$('#el-select-class').html(classNameContext);
					findAllExamSub();
				}
			})
		}
		
		/* 考试的科目信息 */
		function findAllExamSub(){
			var subNameContext = ""
			$.ajax({
				type:"get",
				url:url + "/subScore/selectSubByExamId",
				data:{
					examId:examId
				},
				success:function(data){
					if (data.code == 1001) {
						/* 数据返回成功 */
						var mSubject = data.mSubject; //学校的全部考试信息
						for (var i = 0; i < mSubject.length; i++) {
							if(i == 0){
								subNameContext += "<option value='" + mSubject[i].subId + "'selected>" + mSubject[i].subNm + "</option>"
								subId = mSubject[i].subId;
							}else{
								subNameContext += "<option value='" + mSubject[i].subId + "'>" + mSubject[i].subNm + "</option>"
							}
						}
					}else {
						subNameContext += "<option value='" + data.code + "'>" + data.msg + "</option>"
					} 
					$('#el-select-sub').html(subNameContext);
					subScoreSheet();
				}
			})
		}
	
		//级联select:一级select的值发生改变，触发二级的选项改变
		$("#el-select-exam").change(function() {
			//清空二级和三级select的旧选项
			$("#el-select-class").empty();
			$("#el-select-sub").empty(); 
		
			//获得一级select的值
			examId = $("#el-select-exam").eq(0).val();
			//根据一级select的值，异步获取数据更新二级的选项             
			findAllClass();
		});
		
		//级联select:三级select的值发生改变,触发科目分数段指标表回显
		$("#el-select-sub").change(function() {
			//获得一级select的值
			examId = $("#el-select-exam").eq(0).val();
			subId = $("#el-select-sub").eq(0).val();
			alert(examId +"===="+subId)
			subScoreSheet();
		})
		//科目分数段指标表回显
		function subScoreSheet(){
			var subScoreSheetInfo = ""  //科目分数段指标表回显
			$.ajax({
				type:"get",
				url:url+"/scoreAndAnswerSheet/selectScoreSubsection",
				data:{
					subId:subId,
					examId:examId
				},
				success:function(data){
					console.log(data)
					//<ul id="subSocreSheetInfo">
					if (data.code == 1001) {
						/* 数据返回成功 */
						var ssts = data.ssts; //该科目考试的分数段指标表回显信息
						for (var i = 0; i < ssts.length; i++) {
							subScoreSheetInfo += "<li title='分数段从高分段到低分段填写'>"
							subScoreSheetInfo += "<span class='baohan'>(包含)</span>"
							subScoreSheetInfo += "<input type='number' max='300' min='0' placeholder='低' value='"+ ssts[i].targetStartScore +"'/>"
							subScoreSheetInfo += "<span class='line_divide'></span>"
							subScoreSheetInfo += "<input type='number' max='300' min='0'placeholder='高'  value='"+ ssts[i].targetEndScore +"'/> 分"
							subScoreSheetInfo += "<span class='baohan'>(不包含)</span>"
							subScoreSheetInfo += "<button title='删除该分段'>x</button>"
							subScoreSheetInfo += "</li>"
						}
					}else{
						subScoreSheetInfo += "<option value='" + data.code + "'>" + data.msg + "</option>"
					}
					$('#subSocreSheetInfo').html(subScoreSheetInfo);
				}
			})
		}
	
		//给添加分数段绑定单击事件
		$('#sub_score_add').click(function(){
			var context = "<li title='分数段从高分段到低分段填写'>" +
								"<span class='baohan'>(包含)</span>" +
								"<input type='number' max='300' min='0' placeholder='低' />" +
								"<span class='line_divide'></span>" +
								"<input type='number' max='300' min='0' placeholder='高' /> 分" +
								"<span class='baohan'>(不包含)</span>" +
								"<button title='删除该分段'>x</button>" + 
							"</li>"
			$('#subSocreSheetInfo').append(context)
		})
		
		//给添加分数段 【确定】 单击事件
		$('#sub_score_save').click(function(){
			//var jsond=[{"Name":"aaa"},{"Name":"bbbb"},{"Name":"ccccc"}，{"Name":"dddd"}];
			//获取考试ID
			var examId = $("#el-select-exam").eq(0).val();
			//科目Id
			var subId = $("#el-select-sub").eq(0).val();
			//科目名称
			var subNm = $("#el-select-sub").text();
			alert(subNm)
			
			var jsonArr = [];  //定义数组
			//遍历ul下所有的li
			$('#subSocreSheetInfo>li').each(function(index){
				var low = $(this).children("input[placeholder='低']").val();
				var high = $(this).children("input[placeholder='高']").val();
				//person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"}
				//{"examId":1,"subId":1,"subNm":"1","startScore":0,"endScore":50}
				jsonArr.push({"examId":examId,"subId":subId,"subNm":subNm,"startScore":low,"endScore":high})
			})
			//将数组转化为字符串
			var jsonArrStr = JSON.stringify(jsonArr);
			alert(jsonArrStr)
			$.ajax({
				type:"post",
				url:url+"/scoreAndAnswerSheet/saveScoreSubsection",
				contentType: "application/json;charset=utf-8",
				data:jsonArrStr,
				success:function(data){
					/* console.log(data)
					if(data.length == 0){
						//成功
						alert("添加成功")
					}else{
						alert(data.msg)
					} */
				}
			});
		})
		
		
		//给删除按钮绑定单击事件   ========== 委托
		$('#subSocreSheetInfo').delegate("button","click",function(){
			$(this).parent().remove();
		});
		
		
		//分页查询学生得分与答卷
		function findStuScoreAndAnswerSheet(){
			var subStuInfoContext = "";
			//获取查询框中的值
			var stuNmOrStuNo = $(".el-input__inner").text();
			//获取考试ID
			var examId = $("#el-select-exam").eq(0).val();
			//科目Id
			var subId = $("#el-select-sub").eq(0).val();
			//班级ID
			var claId = $("#el-select-class").eq(0).val();
			$.ajax({
				type:"get",
				url:url+"/scoreAndAnswerSheet/selectStuScoreAndAnswerSheet",
				data:{
					examId:examId,
					claId:claId,
					subId:subId,
					stuNmOrStuNo:stuNmOrStuNo,
					pageSize:10,
					pageNum:1
				},
				success:function(data){
					//<table class="table table-striped">
					//	<tbody>
					console.log(data);
					if(data.code == 1001){
						var pageInfo = data.pageInfo;  //获取分页信息
						for(var i=0;i<pageInfo.list.length;i++){
							subStuInfoContext += "<tr>"
							subStuInfoContext += "<td>"+ pageInfo.list[i].gradeRanking +"</td>"
							subStuInfoContext += "<td>"+ pageInfo.list[i].claNm +"</td>"
							subStuInfoContext += "<td>"+ pageInfo.list[i].stuNo +"</td>"
							subStuInfoContext += "<td>"+ pageInfo.list[i].stuNm +"</td>"
							subStuInfoContext += "<td>"+ pageInfo.list[i].totalScore +"</td>"
							subStuInfoContext += "<td>"+ pageInfo.list[i].objectiveScoreg +"</td>"
							subStuInfoContext += "<td>"+ pageInfo.list[i].subjectiveScore +"</td>"
							subStuInfoContext += "<td><button>查看答卷</button></td>"
							subStuInfoContext += "</tr>"
						}
					}else{
						subStuInfoContext += data.msg;
					}
					$('.table-striped>tbody').html(subStuInfoContext);
				}
			})
		}
	
		//给查看试卷绑定单击事件
		
	</script>
</html>
